<template>
  <div>
    <!--
    必备属性
      action 指定上传地址 请注意, 要对接腾讯云, 所以给个 # 号
        然后用一个 http-request 函数来替代即可
      file-list 管理图片的数组

    样式相关
      list-type 设置了照片墙的样式

    上传相关
      http-request 替换默认上传行为, 后面需要对接腾讯云

      因为不是双向绑定数据，删除的时候并没有真正删除，要手动删除
      默认可以得到两个参数 被删除的文件，删除后的文件列表
      on-preview 预览图片
      on-remove 删除图片
   -->
    <el-upload
      action="#"
      :file-list="fileList"
      list-type="picture-card"

      :on-preview="onPreview"
      :class="{disabled: fileList.length>0}"
      :on-remove="onRmove"
      :on-change="onChange"
      :before-upload="beforeUpload"

      :http-request="upload"
    >
      <i class="el-icon-plus" />
    </el-upload>
    <el-dialog title="预览" :visible="isShowPreview" @close="isShowPreview=false">
      <img :src="PreviewUrl" alt="">
    </el-dialog>
  </div>
</template>

<script>
var COS = require('cos-js-sdk-v5')

// SECRETID 和 SECRETKEY请登录 https://console.cloud.tencent.com/cam/capi 进行查看和管理
var cos = new COS({
  SecretId: 'AKIDazBAuOhla9SXNzMUMyKRIuGMDo9E5g2A',
  SecretKey: 'va0A4j8ICrGPJ0SebJmzwe7KHzSfcJmz'
})
export default {
  data() {
    return {
      fileList: [
        // { url: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.bAMVo8JVST_rh5uWy4HXdQHaHa?pid=ImgDet&rs=1' }
      ],
      PreviewUrl: '',
      isShowPreview: false
    }
  },
  methods: {
    onPreview(file) {
      this.isShowPreview = true
      this.PreviewUrl = file.url
    },
    onRmove(file, newFileList) {
      this.fileList = newFileList
    },
    onChange(file, newFileList) {
      this.fileList = newFileList
    },
    beforeUpload(file) {
      // console.log(file)
      // console.log('上传前的校验')
      const maxSize = 1024 * 1024
      if (file.size > maxSize) {
        this.$message.error('上传的图片大于1M')
        return false
      }
      const type = ['image/jpeg', 'image/png']
      if (!type.includes(file.type)) {
        this.$message.error('只支持jpeg/png格式')
        return false
      }
    },
    upload(params) {
      // 这里替换上传组件的默认上传行为，为后续上传做准备
      console.log('真正上传')
      console.log(params.file)
      const { file } = params
      cos.putObject({
        Bucket: 'hr-1310428913', /* 填入您自己的存储桶，必须字段 */
        Region: 'ap-guangzhou', /* 存储桶所在地域，例如ap-beijing，必须字段 */
        Key: file.name, /* 存储在桶里的对象键（例如1.jpg，a/b/test.txt），必须字段 */
        StorageClass: 'STANDARD',
        Body: file, // 上传文件对象
        onProgress: function(progressData) {
          console.log(JSON.stringify(progressData))
        }
      // }, function(err, data) {
      //   console.log(err || data)
      }, (err, data) => {
        if (!err) {
          // 上传成功
          console.log(11, data)
          this.$message.success('上传成功')
          // this.fileList[0].url = 'http://' + data.Location
          // this.fileList[0].status = 'success'

          // 如果上传的图片数量不止一张, 不一定是修改第一张图片地址
          // 而是上传哪张就改哪张, 上传的图片中,都有 uid 只要在 fileList 里面找到改就行了
          this.fileList.forEach(img => {
            if (img.uid === file.uid) {
              // 找到文件列表中 uid 跟正在上传图片 uid 相同的来改
              img.url = 'http://' + data.Location
              img.status = 'success'
            }
          })
        } else {
          // 上传失败
          console.log(22, err)
          this.$message.error('上传失败')
        }
      })
    }
  }
}
</script>

<style lang="scss" >
  .disabled{
    .el-upload--picture-card {
      display: none;
    }
  }
</style>
